import React from 'react'
import PropTypes from 'prop-types'
import { Redirect, Route } from 'react-router-dom'
import { Block } from 'jsxstyle'
import ScrollToDoc from './ScrollToDoc'
import MarkdownViewer from './MarkdownViewer'

// almost identical to `API`, but I'm lazy rn
const Guide = ({ match, data }) => {
  const { params: { mod, header: headerParam, environment } } = match
  const doc = data.guides.find(doc => mod === doc.title.slug)
  const header = doc && headerParam ? doc.headers.find(h => h.slug === headerParam) : null
  return !doc ? (
    <Redirect to={`/${environment}`}/>
  ) : (
    <Block
      className="api-doc-wrapper"
      fontSize="80%"
    >
      <Block className="api-doc">
        <ScrollToDoc doc={doc} header={header}/>
        <MarkdownViewer html={doc.markup}/>
      </Block>
      <Route
        path={`${match.path}/:header`}
        render={({ match: { params: { header: slug }}}) => {
          const header = doc.headers.find(h => h.slug === slug )
          return header ? (
            <ScrollToDoc doc={doc} header={header}/>
          ) : (
            <Redirect to={`/${environment}/guides/${mod}`}/>
          )
        }}
      />
    </Block>
  )
}

Guide.propTypes = {
  match: PropTypes.object,
  data: PropTypes.object
}

export default Guide
